<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
	name: 'Num',
	props: {
		modelValue: [Number, Object],
		isDisabled: {
			type: Boolean,
		},
	},
	emits: ['update:modelValue', 'input', 'blur', 'focus'],
	setup(props, { emit }) {
		const inputValue = computed({
			get() {
				return Number(props.modelValue);
			},
			set() {},
		});
		return {
			inputValue,
			input(e: string) {
				// const num = Number(e.replace(/\D/g, ""));
				const num = Number(e);
				emit('update:modelValue', num);
				emit('input', num);
			},
			blur(event: InputEvent | any) {
				const { value } = event.target;
				const num = Number(value);
				emit('update:modelValue', num);
				emit('blur', num);
				// const num = Number(value.replace(/\D/g, ""));
				// emit("update:modelValue", num);
				// emit("blur", num);
			},
			focus(e: any) {
				emit('focus', e);
			},
		};
	},
});
</script>
<template>
	<el-input-number
		v-model="inputValue"
		:controls="false"
		:min="-99999999"
		:max="99999999"
		:precision="0"
		:disabled="isDisabled"
		v-bind="$attrs"
		class="Num"
		@focus="focus"
		@input="input"
		@blur="blur"
	></el-input-number>
</template>

<style lang="scss" scoped>
.Num {
	width: 100px;
}
</style>
